<template>
<div class="card edit-field">
  <div class="card-body">
      <label for="edit-post" class="form-label">编辑帖子</label>
      <textarea v-model="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      <button @click="post_a_post" type="button" class="btn btn-primary btn-sm">发帖</button>
  </div>
</div>
</template>

<script> 
import {ref} from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
export default {
  name: 'UserProfileWrite',
  setup(props,context){ //props是父组件传递的数据
    let content = ref('');
    const store = useStore();
    const post_a_post = () => { // 发帖
      $.ajax({
        url:"https://app165.acapp.acwing.com.cn/myspace/post/",
        type:"POST",
        data: {
          content:content.value,
        },
        headers:{
          "Authorization": "Bearer " + store.state.user.access,
        },
        success(resp){ 
          if(resp.result=="success"){ //确保了只有在服务器确认处理成功后，前端才会更新相关状态
            console.log(content.value);
            context.emit('post_a_post', content.value); // 触发父组件的post_a_post函数
            content.value = ''; // 清空输入框
          }
        },
      })
    };
    return {
      content,
      post_a_post
    }
  }
}
</script>

<style scoped>
.edit-field {
  margin-top: 20px;
}
button{
  margin-top: 10px;
}
</style>